<script>
export default {
  name: 'BaseTabs',
  props: {
    tabs: {
      type: Array,
      default: () => [{ id: 0, label: '商店' }],
    },
    value: {
      type: [String, Number],
      default: 0,
    },
    small: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
    }
  },
  mounted() {
  },
  methods: {
    selectTab(id) {
      if (this.value != id) {
        this.$emit('update:value', id)
        this.$emit('change', id)
      }
    },
  },
}
</script>

<template>
  <view class="form-tabs">
    <view v-for="(tab, i) in tabs" :key="i" class="tabs-tab" :class="{ active: tab.id == value, small }" @click="selectTab(tab.id)">
      {{ tab.label }}
    </view>
  </view>
</template>

<style scoped lang="scss">
.form-tabs {
  height: 28px;
  border-bottom: 1px solid #4f4838;
  width: 100%;
  position: relative;
  overflow: hidden;
  display: flex;

  .tabs-tab {
    position: relative;
    border: 1px solid #4f4838;
    border-bottom: none;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    padding: 1px 15px 4px;
    margin: 4px 2px 2px 0;
    height: 100%;
    min-width: 30px;
    text-align: center;
    color: #766e5d;
    background: linear-gradient(to top, rgba(#060606, 0.9), rgba(#343434, 0.9));
    position: relative;
    cursor: pointer;
    transition: all 0.1s ease-in-out;

    &.active {
      padding-top: 3px;
      margin: 0 2px 2px 0;
      background: linear-gradient(to top, rgba(#100d0c, 0.9), rgba(#6b5d41, 0.9));
      color: #b6a98e;
      height: calc(100% + 1px);
    }

    &.small {
      min-width: 10px;
      padding: 1px 7px 4px;
    }
  }
}
</style>
